// 基础图表组件 - 其他所有图表组件的父类
class BaseLineChartComponent extends HTMLElement {
    constructor() {
        super();
        
        this.chart = null;
        this.timerId = null;
        this.observer = null;
        
        // 创建Shadow DOM
        const shadow = this.attachShadow({ mode: 'closed' });
        
        // 创建模板
        const template = document.createElement("template");
        template.innerHTML = `
            <style>
               :host {
                    display: block;
                     width: 100%;
                     height: 100%;
                     min-width: 600px; /* 最小宽度（拖拽缩小的下限） */
                     min-height: 300px; /* 最小高度（拖拽缩小的下限） */
                }
                .chart-container {
                    width: 100%;
                    height: 100%;
                    min-width: 600px; /* 最小宽度（拖拽缩小的下限） */
                    min-height: 300px; /* 最小高度（拖拽缩小的下限） */
                }
            </style>
            <div class="chart-container"></div>
        `;
        
        // 克隆模板内容
        shadow.appendChild(template.content.cloneNode(true));
        
        // 获取图表容器
        const chartDiv = shadow.querySelector('.chart-container');
        
        // 初始化图表实例
        this.chart = echarts.init(chartDiv);
    }
    
    // 监听的属性列表 - 子类可以重写
    static get observedAttributes() {
        console.log("折线监听属性："+ getAttributesByType('line'))
        return window.getAttributesByType('line');
    }
    
    // 默认配置 - 子类应重写此方法提供特定配置
    getDefaultConfig() {
        return {
            // 标题相关属性（title）
            titleAttrs: [
                ['title-text_text', '数据统计'],
                ['title-show_radio', true],
                ['title-left_slider', 'center'],
                ['title-top_slider', '0'],
                ['title-right_slider', ''],
                ['title-bottom_slider', ''],
                ['title-textalign_select', 'center'],
                ['title-textstyle-color_colorpicker', '#333333'],
                ['title-textstyle-fontsize_number', 18],
                ['title-textstyle-fontweight_select', 'bold'],
                ['title-textstyle-fontstyle_select', 'normal'],
                ['title-subtext_text', ''],
                ['title-subtextstyle-color_colorpicker', '#666666'],
                ['title-subtextstyle-fontsize_number', 14],
                ['title-subtextstyle-fontweight_select', 'normal'],
                ['title-subtextstyle-fontstyle_select', 'normal'],
                ['title-itemgap_number', 10],
            ],

            // 网格相关属性（grid）
            gridAttrs: [
                ['grid-left_slider', '10%'],
                ['grid-right_slider', '5%'],
                ['grid-top_slider', '15%'],
                ['grid-bottom_slider', '15%'],
                ['grid-containlabel_radio', true],
            ],

            // X轴相关属性（xAxis）
            xAxisAttrs: [
                ['xaxis-type_text', 'category'],
                ['xaxis-data_array', JSON.stringify(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])],
                ['xaxis-name_text', ''],
                ['xaxis-axislabel-show_radio', true],
                ['xaxis-max_number', ''],
                ['xaxis-min_number', ''],
                ['xaxis-position_select', 'bottom'],
                ['xaxis-offset_number', 0],
                ['xaxis-nametextstyle-color_colorpicker', '#666'],
                ['xaxis-nametextstyle-fontsize_number', 12],
                ['xaxis-nametextstyle-fontweight_select', 'normal'],
                ['xaxis-nametextstyle-fontstyle_select', 'normal'],
                ['xaxis-axislabel-color_colorpicker', '#666'],
                ['xaxis-axislabel-interval_number', 'auto'],
                ['xaxis-axislabel-replace_radio', false],
                ['xaxis-max-char_radio', 0],
                ['xaxis-axislabel-rotate_number', 0],
                ['xaxis-inverse_radio', false],
                ['xaxis-axisline-show_radio', true],
                ['xaxis-axisline-linestyle-color_colorpicker', '#ccc'],
                ['xaxis-axisline-linestyle-width_number', 1],
                ['xaxis-splitline-linestyle-color_colorpicker', '#eee'],
                ['xaxis-splitline-linestyle-width_number', 1],
                ['xaxis-scale_radio', false],
                ['xaxis-show_radio', true],
                ['xaxis-splitline-show_radio', true],
                ['xaxis-vertical-show_radio', false],
                ['xaxis-axislabel-formatter_text', '{value}']
            ],

            // Y轴相关属性（yAxis）
            yAxisAttrs: [
                ['yaxis-type_text', 'value'],
                ['yaxis-name_text', ''],
                ['yaxis-axislabel-show_radio', true],
                ['yaxis-max_number', ''],
                ['yaxis-min_number', ''],
                ['yaxis-position_select', 'left'],
                ['yaxis-offset_number', 0],
                ['yaxis-nametextstyle-color_colorpicker', '#666'],
                ['yaxis-nametextstyle-fontsize_number', 12],
                ['yaxis-nametextstyle-fontweight_select', 'normal'],
                ['yaxis-nametextstyle-fontstyle_select', 'normal'],
                ['yaxis-axislabel-color_colorpicker', '#666'],
                ['yaxis-axislabel-interval_number', 'auto'],
                ['yaxis-axislabel-rotate_number', 0],
                ['yaxis-inverse_radio', false],
                ['yaxis-axisline-show_radio', true],
                ['yaxis-axisline-linestyle-color_colorpicker', '#ccc'],
                ['yaxis-axisline-linestyle-width_number', 1],
                ['yaxis-splitline-linestyle-color_colorpicker', '#eee'],
                ['yaxis-splitline-linestyle-width_number', 1],
                ['yaxis-scale_radio', false],
                ['yaxis-show_radio', true],
                ['yaxis-splitline-show_radio', true],
                ['yaxis-axislabel-formatter_text', '{value}']
            ],

            // 图例相关属性（legend）
            legendAttrs: [
                ['legend-show_radio', true],
                ['legend-left_number', '50%'],
                ['legend-top_number', ''],
                ['legend-right_number', ''],
                ['legend-bottom_number', '90%'],
                ['legend-textstyle-color_colorpicker', '#34495e'],
                ['legend-textstyle-fontsize_number', 12],
                ['legend-itemwidth_number', 25],
                ['legend-itemheight_number', 14],
                ['legend-itemgap_number', 20],
                ['legend-textstyle-fontweight_select', 'normal'],
                ['legend-textstyle-fontstyle_select', 'normal'],
                ['legend-orient_select', 'horizontal'],
                ['legend-selectmode_select', 'single'],
                ['legend-itemstyle-color_colorpicker', 'auto'],
            ],

            // 提示框相关属性（tooltip）
            tooltipAttrs: [
                ['tooltip-show_radio', true],
                ['tooltip-trigger_select', 'axis'],
                ['tooltip-axispointer-type_select', 'line'],
                ['tooltip-axispointer-snap_radio', false],
                ['tooltip-axispointer-label-show_radio', true],
                ['tooltip-axispointer-label-color_colorpicker', '#fff'],
                ['tooltip-axispointer-label-fontsize_number', 12],
                ['tooltip-axispointer-label-fontweight_select', 'normal'],
                ['tooltip-axispointer-label-fontstyle_select', 'normal'],
                ['tooltip-axispointer-linestyle-color_colorpicker', 'rgba(0,0,0,0.3)'],
                ['tooltip-axispointer-linestyle-width_number', 1],
                ['tooltip-formatter_text', '{b}: {c}'],
                ['tooltip-backgroundcolor_colorpicker', 'rgba(50,50,50,0.7)'],
                ['tooltip-bordercolor_colorpicker', '#ccc'],
                ['tooltip-borderwidth_number', 0],
                ['tooltip-padding_number', 5],
            ],
            lineAttrs:[
                // 折线图专属属性（合并到series中）
                ['line-showsymbol_radio', true],
                ['line-symbol_select', 'circle'],
                ['line-symbolsize_slider', 10],
                ['line-lineStyle-width_number', 2],
                ['line-smooth_radio', false],
                ['line-smooth-monotone_select', 'none'],
                ['line-areastyle-show_radio', false],
                ['line-areastyle-color_colorlist', ''],
                ['line-areastyle-color-gradient-show_radio', false],
                ['line-areastyle-color-start_colorlist', 'rgba(128,255,165,0.8)'],
                ['line-areastyle-color-end_colorlist', 'rgba(128,255,165,0)'],
                ['line-endlabel-show_radio', false],
                ['line-endlabel-formatter_text', '{a}'],
                ['line-endlabel-distance_number', 20],
                ['line-endlabel-color_colorpicker', '#333'],
                ['line-stack_text', ''],
                ['line-step_select', 'none'],
                ['line-linestyle-color_colorpicker', 'rgb(128,255,165)'],
            ],

            // 系列相关属性（包含通用系列、折线图专属、定时器属性）
            seriesAttrs: [
                // 通用系列属性
                ['base-data-url_text', ''],
                ['base-background-color_colorpicker', ''],
                ['series-type_select', 'line'],
                ['series-smooth_radio', false],
                ['series-stack_text', ''],
                ['series-label-show_radio', false],
                ['series-label-position_select', 'top'],
                ['series-label-distance_number', 5],
                ['series-label-color_colorpicker', '#333'],
                ['series-label-fontsize_number', 12],
                ['series-label-fontweight_select', 'normal'],
                ['series-label-fontstyle_select', 'normal'],
                ['series-label-formatter_text', '{c}'],
                ['series-labelline-show_radio', false],
                ['series-labelline-linestyle-color_colorpicker', '#666'],
                ['series-labelline-linestyle-width_number', 1],
                ['series-itemstyle-borderradius_number', 0],
                ['series-itemstyle-color_array', ''],
                ['series-itemstyle-bordercolor_colorpicker', '#fff'],
                ['series-itemstyle-borderradius_slider', 0],
                ['series-showbackground_radio', false],
                ['series-backgroundstyle-color_colorpicker', 'rgba(0,0,0,0.05)'],
                ['series-backgroundstyle-bordercolor_colorpicker', '#ccc'],
                ['series-backgroundstyle-borderwidth_number', 1],
                ['series-backgroundstyle-bordertype_select', 'solid'],
                ['series-backgroundstyle-opacity_slider', 1],
                ['series-emphasis-itemstyle-shadowblur_number', 10],
                ['series-emphasis-itemstyle-shadowcolor_colorpicker', 'rgba(0,0,0,0.5)'],
                ['series-barmaxwidth_slider', 50],
                ['series-bargap_text', '30%'],
                ['series-barminheight_slider', 0],
                ['series-barminwidth_slider', 0],
                ['series-barcategorygap_text', '20%'],



                // 定时器属性（合并到series中）
                ['echart-timer', 0]
            ]
        };
    }


    // 默认渐变色方案
    getDefaultGradients() {
        return [
            { start: 'rgb(128, 255, 165)', end: 'rgb(1, 191, 236)' },
            { start: 'rgb(0, 221, 255)', end: 'rgb(77, 119, 255)' },
            { start: 'rgb(55, 162, 255)', end: 'rgb(116, 21, 219)' },
            { start: 'rgb(255, 0, 135)', end: 'rgb(135, 0, 157)' },
            { start: 'rgb(255, 191, 0)', end: 'rgb(224, 62, 76)' }
        ];
    }
    
    connectedCallback() {
        // 导入工具函数
        const { buildConfig } = window.attributeUtils;
        const config = this.getDefaultConfig();
        
        // 生成配置
        const titleConfig = buildConfig(this, config.titleAttrs);
        const gridConfig = buildConfig(this, config.gridAttrs);
        const xAxisConfig = buildConfig(this, config.xAxisAttrs);
        const yAxisConfig = buildConfig(this, config.yAxisAttrs);
        const legendConfig = buildConfig(this, config.legendAttrs);
        const seriesConfig = buildConfig(this, config.seriesAttrs);
        const tooltipConfig = buildConfig(this, config.tooltipAttrs);
        const lineConfig = buildConfig(this, config.lineAttrs);
        // 调整初始大小
        this.resizeChart();
        // 监听resize事件
        window.addEventListener('resize', this.resizeChart.bind(this));
        // 观察父容器的大小变化
        if (ResizeObserver) {
            this.observer = new ResizeObserver(() => this.resizeChart());
            this.observer.observe(this.parentElement);
        }
        
        // 加载数据并渲染图表
        if (seriesConfig.dataUrl) {
            this.loadDataAndRender(seriesConfig, titleConfig, gridConfig, xAxisConfig, yAxisConfig, legendConfig, tooltipConfig,lineConfig);
        } else {
            // 使用默认数据渲染
            this.renderChart(seriesConfig, titleConfig, gridConfig, xAxisConfig, yAxisConfig, legendConfig, tooltipConfig,lineConfig);
        }
        
        // 执行外部初始化脚本
        if (seriesConfig.echartInitScript) {
            try {
                eval(seriesConfig.echartInitScript);
            } catch (e) {
                console.error('执行初始化脚本错误:', e);
            }
        }
    }
    
    // 加载数据并渲染图表
    loadDataAndRender(seriesConfig, titleConfig, gridConfig, xAxisConfig, yAxisConfig, legendConfig, tooltipConfig, lineConfig) {
        fetch(seriesConfig.dataUrl)
            .then(res => {
                if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
                return res.json();
            })
            .then(data => {
                this.renderChart(seriesConfig, titleConfig, gridConfig, xAxisConfig, yAxisConfig, legendConfig,tooltipConfig, lineConfig,data);
            })
            .catch(err => {
                console.error('数据获取失败:', err);
                // 使用默认数据
                this.renderChart(seriesConfig, titleConfig, gridConfig, xAxisConfig, yAxisConfig, legendConfig,tooltipConfig, lineConfig);
            });
    }
    
    // 渲染图表 - 子类可以重写以实现特定逻辑
    renderChart(seriesConfig, titleConfig, gridConfig, xAxisConfig, yAxisConfig, legendConfig ,tooltipConfig, lineConfig, data = null, ) {
        // 处理数据
        let dataDemo = data || this.getDefaultData();
        // 生成series数组
        const series = this.generateSeries(dataDemo, seriesConfig, lineConfig );

        // 设置X轴数据
        if (dataDemo.length > 0) {
            const firstItem = dataDemo[0];
            const firstKey = Object.keys(firstItem)[0];
            xAxisConfig.data = firstItem[firstKey].map(item => item.name);
        }

        debugger
        // 补全后的ECharts配置项
        const option = {
            // 基础配置
            backgroundColor: seriesConfig.backgroundColor || 'transparent',
            borderRadius: seriesConfig.borderradius || 0,
            borderWidth: seriesConfig.borderwidth || 0,
            borderColor: seriesConfig.bordercolor || 'transparent',
            tooltip: {
                show: tooltipConfig.show,
                trigger: tooltipConfig.trigger,
                triggerOn: tooltipConfig.triggeron || 'mousemove|click',
                axisPointer: {
                    type: tooltipConfig.axispointerType,
                    snap: tooltipConfig.axispointerSnap,
                    label: {
                        show: tooltipConfig.axispointerLabelShow,
                        color: tooltipConfig.axispointerLabelColor,
                        fontSize: tooltipConfig.axispointerLabelFontsize,
                        fontWeight: tooltipConfig.axispointerLabelFontweight,
                        fontStyle: tooltipConfig.axispointerLabelFontstyle,
                        padding: [5, 10]
                    },
                    lineStyle: {
                        color: tooltipConfig.axispointerLinestyleColor,
                        width: tooltipConfig.axispointerLinestyleWidth,
                        type: 'solid'
                    }
                },
                formatter: tooltipConfig.formatter,
                backgroundColor: tooltipConfig.backgroundcolor,
                borderColor: tooltipConfig.bordercolor,
                borderWidth: tooltipConfig.borderwidth,
                padding: tooltipConfig.padding,
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                },
                enterable: false,
                confine: false
            },
            legend: {
                show: legendConfig.show,
                type: 'plain',
                left: legendConfig.left,
                top: legendConfig.top,
                right: legendConfig.right,
                bottom: legendConfig.bottom,
                width: 'auto',
                height: 'auto',
                orient: legendConfig.orient,
                align: 'auto',
                padding: 5,
                itemGap: legendConfig.itemgap,
                itemWidth: legendConfig.itemwidth,
                itemHeight: legendConfig.itemheight,
                symbol: 'circle',
                symbolKeepAspect: false,
                selectedMode: legendConfig.selectmode,
                inactiveColor: '#ccc',
                textStyle: {
                    color: legendConfig.textstyleColor,
                    fontSize: legendConfig.textstyleFontsize,
                    fontWeight: legendConfig.textstyleFontweight,
                    fontStyle: legendConfig.textstyleFontstyle
                },
                itemStyle: {
                    color: legendConfig.itemstyleColor
                },
                emphasis: {
                    textStyle: {
                        fontWeight: 'bold'
                    }
                }
            },
            grid: {
                show: gridConfig.show || false,
                left: gridConfig.left,
                right: gridConfig.right,
                top: gridConfig.top,
                bottom: gridConfig.bottom,
                containLabel: gridConfig.containlabel,
                borderColor: gridConfig.bordercolor || '#ccc',
                borderWidth: gridConfig.borderwidth || 0,
                backgroundColor: gridConfig.backgroundcolor || 'transparent',
                padding: [5, 5, 5, 5]
            },
            xAxis: {
                type: xAxisConfig.type || 'category',
                data: xAxisConfig.data || [],
                show: xAxisConfig.show,
                position: xAxisConfig.position || 'bottom',
                offset: xAxisConfig.offset || 0,
                inverse: xAxisConfig.inverse || false,
                boundaryGap: xAxisConfig.boundarygap || true,
                scale: xAxisConfig.scale,
                name: xAxisConfig.name || '',
                nameLocation: xAxisConfig.namelocation || 'end',
                nameGap: xAxisConfig.namegap || 15,
                nameTextStyle: {
                    color: xAxisConfig.nametextstyleColor,
                    fontSize: xAxisConfig.nametextstyleFontsize,
                    fontWeight: xAxisConfig.nametextstyleFontweight,
                    fontStyle: xAxisConfig.nametextstyleFontstyle
                },
                axisLine: {
                    show: xAxisConfig.axislineShow,
                    symbol: ['none', 'arrow'],
                    symbolSize: [8, 12],
                    lineStyle: {
                        color: xAxisConfig.axislineLinestyleColor,
                        width: xAxisConfig.axislineLinestyleWidth,
                        type: 'solid'
                    }
                },
                axisTick: {
                    show: xAxisConfig.axistickShow || true,
                    alignWithLabel: false,
                    length: 5,
                    lineStyle: {
                        color: '#333',
                        width: 1
                    }
                },
                axisLabel: {
                    show: xAxisConfig.axislabelShow,
                    color: xAxisConfig.axislabelColor,
                    fontSize: 12,
                    interval: xAxisConfig.axislabelInterval,
                    rotate: xAxisConfig.axislabelRotate,
                    margin: 8,
                    formatter: xAxisConfig.axislabelFormatter  // 关联配置项
                },
                splitLine: {
                    show: xAxisConfig.splitlineShow,
                    lineStyle: {
                        color: xAxisConfig.splitlineLinestyleColor,
                        width: xAxisConfig.splitlineLinestyleWidth,
                        type: 'solid'
                    }
                },
                splitArea: {
                    show: false,
                    areaStyle: {
                        color: ['rgba(255,255,255,0.3)', 'rgba(200,200,200,0.3)']
                    }
                }
            },
            yAxis: {
                type: yAxisConfig.type || 'value',
                show: yAxisConfig.show,
                position: yAxisConfig.position,
                offset: yAxisConfig.offset,
                inverse: yAxisConfig.inverse,
                scale: yAxisConfig.scale,
                name: yAxisConfig.name || '',
                nameLocation: yAxisConfig.namelocation || 'middle',
                nameGap: yAxisConfig.namegap || 30,
                nameTextStyle: {
                    color: yAxisConfig.nametextstyleColor,
                    fontSize: yAxisConfig.nametextstyleFontsize,
                    fontWeight: yAxisConfig.nametextstyleFontweight,
                    fontStyle: yAxisConfig.nametextstyleFontstyle
                },
                min: yAxisConfig.min !== '' ? (yAxisConfig.min === 'auto' ? null : Number(yAxisConfig.min)) : null,
                max: yAxisConfig.max !== '' ? (yAxisConfig.max === 'auto' ? null : Number(yAxisConfig.max)) : null,
                axisLine: {
                    show: yAxisConfig.axislineShow,
                    lineStyle: {
                        color: yAxisConfig.axislineLinestyleColor,
                        width: yAxisConfig.axislineLinestyleWidth
                    }
                },
                axisTick: {
                    show: true,
                    length: 5,
                    lineStyle: {
                        color: '#333'
                    }
                },
                axisLabel: {
                    show: yAxisConfig.axislabelShow,
                    color: yAxisConfig.axislabelColor,
                    fontSize: 12,
                    margin: 8,
                    // 使用配置项中的格式，支持自定义（如百分比、小数位等）
                    formatter: yAxisConfig.axislabelFormatter
                },
                splitLine: {
                    show: yAxisConfig.splitlineShow,
                    lineStyle: {
                        color: yAxisConfig.splitlineLinestyleColor,
                        width: yAxisConfig.splitlineLinestyleWidth,
                        type: 'solid'
                    }
                },
                splitArea: {
                    show: false
                }
            },
            series: series,
            // 动画配置
            animation: true,
            animationDuration: 1000,
            animationEasing: 'cubicOut',
            animationDelay: (idx) => idx * 100,
            animationDurationUpdate: 500,
            animationEasingUpdate: 'cubicInOut',
            // 颜色配置（全局系列颜色）
            color: [
                '#5470c6', '#91cc75', '#fac858', '#ee6666',
                '#73c0de', '#3ba272', '#fc8452', '#9a60b4'
            ]
        };

        console.log('完整折线图配置:', JSON.stringify(option))
        this.chart.setOption(option);
    }
    
    // 生成系列配置 - 子类可以重写
    // 重写：生成凹凸图特有的系列数据（使用数据中的name字段作为系列名称）
    generateSeries(dataDemo, seriesConfig, lineConfig = null) {
        const defaultGradients = this.getDefaultGradients();

        // 提取所有唯一的name（动态获取数据键名，不写死"销售"）
        const uniqueNames = [...new Set(
            dataDemo.flatMap(item => {
                // 动态获取当前item的第一个键（替代固定的"销售"）
                const dynamicKey = Object.keys(item)[0];
                // 容错处理：确保键存在且对应的值是数组
                if (!dynamicKey) {
                    console.warn('数据项缺少有效键名', item);
                    return [];
                }

                const dataArray = item[dynamicKey];
                // 容错处理：确保获取到的是数组
                if (!Array.isArray(dataArray)) {
                    console.warn(`键"${dynamicKey}"对应的值不是数组`, dataArray);
                    return [];
                }

                // 提取所有name字段
                return dataArray.map(dataItem => {
                    // 确保数据项包含name字段
                    if (!dataItem || !dataItem.name) {
                        console.warn('数据项缺少name字段', dataItem);
                        return `未知名称${Date.now()}`; // 生成唯一标识避免重复
                    }
                    return dataItem.name;
                });
            })
        )];

        // 为每个唯一name创建一个系列（保持原有逻辑）
        return uniqueNames.map((name, index) => {
            const gradientIndex = index % defaultGradients.length;
            const defaultGradient = defaultGradients[gradientIndex];

            // 收集当前name在所有数据项中的value
            const dataValues = dataDemo.map(item => {
                const dynamicKey = Object.keys(item)[0];
                if (!dynamicKey || !Array.isArray(item[dynamicKey])) {
                    return 0; // 无效数据返回默认值
                }

                const salesItem = item[dynamicKey].find(dataItem => dataItem?.name === name);
                return salesItem?.value ?? 0; // 找不到时默认值为0
            });

            debugger
            return {
                name: name,
                type: 'line',
                data: dataValues,
                smooth: seriesConfig.smooth || true,
                stack: seriesConfig.stack || '',
                emphasis: {
                    scale: true,
                    focus: 'series'
                },
                lineStyle: {
                    width: seriesConfig.lineWidth || 2,
                    color: seriesConfig.lineColor || defaultGradient.start
                },
                ...(seriesConfig.areastyleShow ? {
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: seriesConfig.areastyleColorStart || defaultGradient.start },
                            { offset: 1, color: seriesConfig.areastyleColorEnd|| defaultGradient.end }
                        ]),
                        opacity: seriesConfig.fillOpacity || 0.7
                    }
                } : {}),
                symbol: 'circle',
                symbolSize: 6,
                itemStyle: {
                    color: seriesConfig.lineColor || defaultGradient.start,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                animationDuration: (this.bumpConfig && typeof this.bumpConfig.transitionDuration !== 'undefined')
                    ? this.bumpConfig.transitionDuration
                    : 1000
            };
        });
    }



    // 获取默认数据 - 子类可以重写
    getDefaultData() {
        return [
            {
                "销量": [
                    { "name": "1月", "value": 1200 },
                    { "name": "2月", "value": 1900 },
                    { "name": "3月", "value": 1500 },
                    { "name": "4月", "value": 2400 },
                    { "name": "5月", "value": 1800 },
                    { "name": "6月", "value": 3000 }
                ]
            }
        ];
    }
    
    // 属性变化时更新图表
    attributeChangedCallback(name, oldValue, newValue) {
        if (name && oldValue !== newValue) {
            const currentOptions = this.chart.getOption();
            if (!currentOptions) return;
            
            this.handleAttributeChange(name, newValue, currentOptions);
        }
    }
    
    // 处理属性变化 - 子类可以扩展
    handleAttributeChange(name, value, currentOptions) {
        // 统一获取默认渐变色（供区域、折线图渐变使用）
        const defaultGradients = this.getDefaultGradients();
        // 存储更新后的配置（外部函数返回新配置）
        let updatedOptions;

        switch (name) {
            // 系列相关属性
            case 'line-areastyle-color-gradient-show_radio':
                updatedOptions = updateGradientStyle(value, currentOptions, defaultGradients);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-areastyle-show_radio':
                updatedOptions = updateAreaStyle(value, currentOptions, defaultGradients);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-areastyle-color_colorpicker':
                updatedOptions = updateAreaColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-smooth_radio':
                updatedOptions = updateSmooth(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-stack_text':
                updatedOptions = updateStack(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-line-style-width_number':
                updatedOptions = updateLineWidth(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-line-style-color_colorpicker':
                updatedOptions = updateLineColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;

            // 标题相关属性
            case 'title-show_radio':
                updatedOptions = updateTitleVisibility(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-text_text':
                updatedOptions = updateTitleText(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-textstyle-color_colorpicker':
                updatedOptions = updateTitleStyle('color', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-textstyle-fontsize_number':
                updatedOptions = updateTitleStyle('fontSize', parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-textstyle-fontweight_select':
                updatedOptions = updateTitleFontWeight('title', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-textstyle-fontstyle_select':
                updatedOptions = updateTitleStyle('fontStyle', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-subtext_text':
                updatedOptions = updateSubtitleText(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            // 副标题文本颜色
            case 'title-subtextstyle-color_colorpicker':
                updatedOptions = updateSubtitleTextColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-subtextstyle-fontsize_number':
                updatedOptions = updateSubtitleFontSize(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            // 副标题字体粗细
            case 'title-subtextstyle-fontweight_select':
                updatedOptions = updateTitleFontWeight('subtitle', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-subtextstyle-fontstyle_select':
                updatedOptions = updateSubtitleStyle('fontStyle', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-left_slider':
                updatedOptions = updateTitlePosition('left', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-top_slider':
                updatedOptions = updateTitlePosition('top', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-right_slider':
                updatedOptions = updateTitlePosition('right', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-bottom_slider':
                updatedOptions = updateTitlePosition('bottom', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-itemgap_number':
                updatedOptions = updateTitleItemGap(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-textalign_select':
                updatedOptions = updateTitleTextAlign(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;

            // 网格相关属性
            case 'grid-left_slider':
                updatedOptions = updateGridPosition('left', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'grid-right_slider':
                updatedOptions = updateGridPosition('right', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'grid-top_slider':
                updatedOptions = updateGridPosition('top', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'grid-bottom_slider':
                updatedOptions = updateGridPosition('bottom', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'grid-containlabel_radio':
                updatedOptions = updateGridContainLabel(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;

            // ======================
            // 图例相关属性
            // ======================
            case 'legend-show_radio':
                updatedOptions = updateLegendVisibility(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-left_number':
                updatedOptions = updateLegendPosition('left', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-top_number':
                updatedOptions = updateLegendPosition('top', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-right_number':
                updatedOptions = updateLegendPosition('right', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-bottom_number':
                updatedOptions = updateLegendPosition('bottom', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-textstyle-color_colorpicker':
                updatedOptions = updateLegendTextStyle('color', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-textstyle-fontsize_number':
                updatedOptions = updateLegendTextStyle('fontSize', parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-itemwidth_number':
                updatedOptions = updateLegendItemStyle('itemWidth', parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-itemheight_number':
                updatedOptions = updateLegendItemStyle('itemHeight', parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-itemgap_number':
                updatedOptions = updateLegendItemGap(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-textstyle-fontweight_select':
                updatedOptions = updateLegendFontWeight(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-textstyle-fontstyle_select':
                updatedOptions = updateLegendTextStyle('fontStyle', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-orient_select':
                updatedOptions = updateLegendOrientation(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-selectmode_select':
                updatedOptions = updateLegendSelectMode(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-itemstyle-color_colorpicker':
                updatedOptions = updateLegendItemStyleColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;

            // ======================
            // 提示框相关
            // ======================
            case 'tooltip-show_radio':
                updatedOptions = updateTooltipVisibility(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-trigger_select':
                updatedOptions = updateTooltipTrigger(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-axispointer-type_select':
                updatedOptions = updateTooltipAxisPointerType(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-axispointer-snap_radio':
                updatedOptions = updateTooltipAxisPointerSnap(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-axispointer-label-show_radio':
                updatedOptions = updateTooltipAxisPointerLabelVisibility(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-axispointer-label-color_colorpicker':
                updatedOptions = updateTooltipAxisPointerLabelColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-axispointer-label-fontsize_number':
                updatedOptions = updateTooltipAxisPointerLabelFontSize(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-axispointer-label-fontweight_select':
                updatedOptions = updateTooltipAxisPointerLabelFontWeight(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-axispointer-label-fontstyle_select':
                updatedOptions = updateTooltipAxisPointerLabelFontStyle(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-axispointer-linestyle-color_colorpicker':
                updatedOptions = updateTooltipAxisPointerLineStyleColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-axispointer-linestyle-width_number':
                updatedOptions = updateTooltipAxisPointerLineStyleWidth(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-formatter_text':
                updatedOptions = updateTooltipFormatter(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-backgroundcolor_colorpicker':
                updatedOptions = updateTooltipBackgroundColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-bordercolor_colorpicker':
                updatedOptions = updateTooltipBorderColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-borderwidth_number':
                updatedOptions = updateTooltipBorderWidth(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-padding_number':
                updatedOptions = updateTooltipPadding(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;

            // ======================
            // 系列属性
            // ======================
            case 'series-label-show_radio':
                updatedOptions = updateSeriesLabelVisibility(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-label-position_select':
                updatedOptions = updateSeriesLabelPosition(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-label-distance_number':
                updatedOptions = updateSeriesLabelDistance(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-label-color_colorpicker':
                updatedOptions = updateSeriesLabelColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-label-fontsize_number':
                updatedOptions = updateSeriesLabelFontSize(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-label-fontweight_select':
                updatedOptions = updateSeriesLabelFontWeight(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-label-fontstyle_select':
                updatedOptions = updateSeriesLabelFontStyle(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-label-formatter_text':
                updatedOptions = updateSeriesLabelFormatter(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-labelline-show_radio':
                updatedOptions = updateSeriesLabelLineVisibility(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-barmaxwidth_slider':
                updatedOptions = updateSeriesBarMaxWidth(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-itemstyle-borderradius_number':
                updatedOptions = updateSeriesItemStyleBorderRadius(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-bargap_text':
                updatedOptions = updateSeriesBarGap(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-barminheight_slider':
                updatedOptions = updateSeriesBarMinHeight(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-showbackground_radio':
                updatedOptions = updateSeriesShowBackground(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-backgroundstyle-color_colorpicker':
                updatedOptions = updateSeriesBackgroundStyleColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-backgroundstyle-bordercolor_colorpicker':
                updatedOptions = updateSeriesBackgroundStyleBorderColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'base-background-color_colorpicker':
                // 更新图表整体背景色
                const bgColorOptions = {
                    backgroundColor: value // 直接使用颜色值设置背景
                };
                this.chart.setOption(bgColorOptions);
                break;
            case 'series-backgroundstyle-borderwidth_number':
                updatedOptions = updateSeriesBackgroundStyleBorderWidth(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-backgroundstyle-bordertype_select':
                updatedOptions = updateSeriesBackgroundStyleBorderType(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-backgroundstyle-opacity_slider':
                updatedOptions = updateSeriesBackgroundStyleOpacity(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-labelline-linestyle-color_colorpicker':
                updatedOptions = updateSeriesLabelLineStyleColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-labelline-linestyle-width_number':
                updatedOptions = updateSeriesLabelLineStyleWidth(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-itemstyle-color_array':
                updatedOptions = updateSeriesItemStyleColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-itemstyle-bordercolor_colorpicker':
                updatedOptions = updateSeriesItemStyleBorderColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-itemstyle-borderradius_slider':
                updatedOptions = updateSeriesItemStyleBorderRadius(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-barminwidth_slider':
                updatedOptions = updateSeriesBarMinWidth(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-emphasis-itemstyle-shadowblur_number':
                updatedOptions = updateSeriesEmphasisItemStyleShadowBlur(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-emphasis-itemstyle-shadowcolor_colorpicker':
                updatedOptions = updateSeriesEmphasisItemStyleShadowColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-stack_text':
                updatedOptions = updateSeriesStack(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-barcategorygap_text':
                updatedOptions = updateSeriesBarCategoryGap(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;

            // 坐标轴相关属性
            case 'xaxis-name_text':
                updatedOptions = updateAxisName('x', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'xaxis-axislabel-show_radio':
                updatedOptions = updateAxisLabelVisibility('x', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'yaxis-axislabel-show_radio':
                updatedOptions = updateAxisLabelVisibility('y', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'xaxis-max_number':
                updatedOptions = updateAxisMax('x', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'yaxis-max_number':
                updatedOptions = updateAxisMax('y', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'xaxis-min_number':
                updatedOptions = updateAxisMin('x', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'yaxis-min_number':
                updatedOptions = updateAxisMin('y', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'xaxis-position_select':
                updatedOptions = updateAxisPosition('x', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'yaxis-position_select':
                updatedOptions = updateAxisPosition('y', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'xaxis-offset_number':
                updatedOptions = updateAxisOffset('x', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'yaxis-offset_number':
                updatedOptions = updateAxisOffset('y', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            // X轴数值格式更新
            case 'xaxis-axislabel-formatter_text':
                updatedOptions = updateAxisLabelFormatter('x', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;

            // Y轴数值格式更新
            case 'yaxis-axislabel-formatter_text':
                updatedOptions = updateAxisLabelFormatter('y', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'xaxis-nametextstyle-color_colorpicker':
                updatedOptions = updateAxisNameTextColor('x', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'xaxis-nametextstyle-fontsize_number':
                updatedOptions = updateAxisNameTextFontSize('x', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'xaxis-nametextstyle-fontweight_select':
                updatedOptions = updateAxisNameTextFontWeight('x', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'yaxis-nametextstyle-fontweight_select':
                updatedOptions = updateAxisNameTextFontWeight('y', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'xaxis-nametextstyle-fontstyle_select':
                updatedOptions = updateAxisNameTextStyle('x', 'fontStyle', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'yaxis-nametextstyle-fontstyle_select':
                updatedOptions = updateAxisNameTextStyle('y', 'fontStyle', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'xaxis-axislabel-color_colorpicker':
                updatedOptions = updateAxisLabelColor('x', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'xaxis-axislabel-interval_number':
                updatedOptions = updateAxisLabelInterval('x', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'yaxis-axislabel-interval_number':
                updatedOptions = updateAxisLabelInterval('y', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'xaxis-axislabel-replace_radio':
                updatedOptions = updateAxisLabelReplace('x', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'xaxis-max-char_radio':
                updatedOptions = updateAxisLabelMaxChar('x', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'xaxis-axislabel-rotate_number':
                updatedOptions = updateAxisLabelRotate('x', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'xaxis-inverse_radio':
                updatedOptions = updateAxisInverse('x', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'yaxis-inverse_radio':
                updatedOptions = updateAxisInverse('y', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'xaxis-axisline-show_radio':
                updatedOptions = updateAxisLineVisibility('x', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'yaxis-axisline-show_radio':
                updatedOptions = updateAxisLineVisibility('y', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'xaxis-axisline-linestyle-color_colorpicker':
                updatedOptions = updateAxisLineStyle('x', 'color', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'yaxis-axisline-linestyle-color_colorpicker':
                updatedOptions = updateAxisLineStyle('y', 'color', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'xaxis-axisline-linestyle-width_number':
                updatedOptions = updateAxisLineStyle('x', 'width', parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'yaxis-axisline-linestyle-width_number':
                updatedOptions = updateAxisLineStyle('y', 'width', parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'xaxis-splitline-linestyle-color_colorpicker':
                updatedOptions = updateAxisSplitLineStyle('x', 'color', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'yaxis-splitline-linestyle-color_colorpicker':
                updatedOptions = updateAxisSplitLineStyle('y', 'color', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'xaxis-splitline-linestyle-width_number':
                updatedOptions = updateAxisSplitLineStyle('x', 'width', parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'yaxis-splitline-linestyle-width_number':
                updatedOptions = updateAxisSplitLineStyle('y', 'width', parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'yaxis-scale_radio':
                updatedOptions = updateAxisScale('y', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'xaxis-scale_radio':
                updatedOptions = updateAxisScale('x', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'xaxis-show_radio':  // 新增x轴显示判断
                updatedOptions = updateAxisVisibility('x', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'yaxis-show_radio':  // 新增y轴显示判断
                updatedOptions = updateAxisVisibility('y', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'yaxis-name_text':
                updatedOptions = updateAxisName('y', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'xaxis-name-textstyle-color_colorpicker':
                updatedOptions = updateAxisNameStyle('x', 'color', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'yaxis-name-textstyle-color_colorpicker':
                updatedOptions = updateAxisNameStyle('y', 'color', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'yaxis-axislabel-color_colorpicker':
                updatedOptions = updateAxisLabelColor('y', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'yaxis-nametextstyle-color_colorpicker':
                updatedOptions = updateAxisNameTextColor('y', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'yaxis-nametextstyle-fontsize_number':
                updatedOptions = updateAxisNameTextFontSize('y', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'yaxis-axislabel-rotate_number':
                updatedOptions = updateAxisLabelRotate('y', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'xaxis-vertical-show_radio':
                // 保持原有特殊处理逻辑
                if (currentOptions) {
                    const isVertical = value === 'true';
                    let categories = [];
                    if (isVertical) {
                        categories = currentOptions.xAxis?.[0]?.data || [];
                    } else {
                        categories = currentOptions.yAxis?.[0]?.data || [];
                    }

                    if (isVertical) {
                        currentOptions.xAxis[0].type = 'value';
                        currentOptions.yAxis[0].type = 'category';
                        currentOptions.xAxis[0].data = [];
                        currentOptions.yAxis[0].data = categories;
                    } else {
                        currentOptions.xAxis[0].type = 'category';
                        currentOptions.yAxis[0].type = 'value';
                        currentOptions.xAxis[0].data = categories;
                        currentOptions.yAxis[0].data = [];
                    }
                    this.chart.setOption(currentOptions, true);
                }
                break;
            case 'xaxis-splitline-show_radio':
                updatedOptions = updateAxisSplitLineShow('x', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'yaxis-splitline-show_radio':
                updatedOptions = updateAxisSplitLineShow('y', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;

            // 数据相关属性
            case 'base-data-url_text':
                this.updateData(value);  // 保持原有数据更新逻辑
                break;

            // 定时器相关属性
            case 'echart-timer':
                this.setTimer(parseInt(value) * 1000);  // 保持原有定时器逻辑
                break;
            // ======================
            // 折线图专属
            // ======================
            case 'line-showsymbol_radio':
                updatedOptions = updateLineShowSymbol(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'line-symbol_select':
                updatedOptions = updateLineSymbol(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'line-symbolsize_slider':
                updatedOptions = updateLineSymbolSize(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'line-lineStyle-width_number':
                updatedOptions = updateLineLineStyleWidth(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'line-smooth_radio':
                updatedOptions = updateLineSmooth(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'line-smooth-monotone_select':
                updatedOptions = updateLineSmoothMonotone(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'line-areastyle-show_radio':
                updatedOptions = updateLineAreaStyleShow(value, currentOptions);
                this.chart.setOption(updatedOptions, true);
                break;
            case 'line-areastyle-color_colorlist':
                updatedOptions = updateLineAreaStyleColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'line-areastyle-color-gradient-show_radio':
                updatedOptions = updateLineAreaGradientShow(value, currentOptions, defaultGradients);
                this.chart.setOption(updatedOptions);
                break;
            case 'line-areastyle-color-start_colorlist':
                updatedOptions = updateLineAreaGradientStart(value, currentOptions, defaultGradients);
                this.chart.setOption(updatedOptions);
                break;
            case 'line-areastyle-color-end_colorlist':
                updatedOptions = updateLineAreaGradientEnd(value, currentOptions, defaultGradients);
                this.chart.setOption(updatedOptions);
                break;
            case 'line-endlabel-show_radio':
                updatedOptions = updateLineEndLabelShow(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'line-endlabel-formatter_text':
                updatedOptions = updateLineEndLabelFormatter(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'line-endlabel-distance_number':
                updatedOptions = updateLineEndLabelDistance(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'line-endlabel-color_colorpicker':
                updatedOptions = updateLineEndLabelColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'line-stack_text':
                updatedOptions = updateLineStack(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'line-step_select':
                updatedOptions = updateLineStep(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'line-linestyle-color_colorpicker':
                updatedOptions = updateLineLineStyleColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;

            // 默认情况：未处理的属性
            default:
                console.log(`未处理的属性: ${name}`);
        }
    }
    // 组件断开连接时清理资源
    disconnectedCallback() {
        window.removeEventListener('resize', this.resizeChart.bind(this));
        
        if (this.observer) {
            this.observer.disconnect();
        }
        
        clearInterval(this.timerId);
    }
    
    // 调整图表大小
    resizeChart() {
        if (this.chart) {
            this.chart.resize();
        }
    }
    
    // 设置定时器
    setTimer(interval) {
        clearInterval(this.timerId);
        if (interval > 0) {
            this.timerId = setInterval(() => {
                this.executeScript();
            }, interval);
        }
    }
    
    // 执行脚本
    executeScript() {
        const { buildConfig } = window.attributeUtils;
        const seriesConfig = buildConfig(this, this.getDefaultConfig().seriesAttrs);
        
        if (seriesConfig.echartTimerScript) {
            try {
                eval(seriesConfig.echartTimerScript);
            } catch (error) {
                console.log(error.message);
            }
        }
    }
    
    // 获取图表实例
    getChartInstance() {
        return this.chart;
    }
    
    // 更新数据
    async updateData(dataurl) {
        try {
            if (!dataurl) {
                throw new Error("数据请求URL不能为空");
            }
            if (!this.chart) {
                throw new Error("图表实例未初始化");
            }
            
            const response = await fetch(dataurl);
            if (!response.ok) {
                throw new Error(`HTTP请求失败: ${response.status}`);
            }
            
            const data = await response.json();
            if (!data){
                throw new Error("数据为空");
                return;
            }
            const { buildConfig } = window.attributeUtils;
            const config = this.getDefaultConfig();
            
            const seriesConfig = buildConfig(this, config.seriesAttrs);
            const titleConfig = buildConfig(this, config.titleAttrs);
            const gridConfig = buildConfig(this, config.gridAttrs);
            const xAxisConfig = buildConfig(this, config.xAxisAttrs);
            const yAxisConfig = buildConfig(this, config.yAxisAttrs);
            const legendConfig = buildConfig(this, config.legendAttrs);

            this.chart.clear(); // 先清空图表
            this.renderChart(seriesConfig, titleConfig, gridConfig, xAxisConfig, yAxisConfig, legendConfig, data);
            
        } catch (error) {
            console.error(`数据更新失败: ${error.message}`);
        }
    }
}
export default  BaseLineChartComponent